<template>
  <el-form label-width="100px">
    <el-form-item label="登记类型">
      <div class="d-flex align-items-center">
        <el-radio-group v-model="visitType">
          <el-radio v-for="(type, index) in types" :key="index" :label="type"></el-radio>
        </el-radio-group>
        <el-input
          style="width: 160px; margin-left: 5px"
          v-if="showOtherInput"
          v-model="otherVisitType"
        ></el-input>
        <div style="height: 36px" v-else></div>
      </div>
    </el-form-item>
    <el-form-item label="登记状态">
      <div class="d-flex align-items-center">
        <c-radio-group v-model="params.visit_status" :options="options"></c-radio-group>
        <c-select
          v-model="operateAbType"
          class="ml-1"
          v-if="showOperateAbSelect"
          :options="operateAbList"
        ></c-select>
        <div style="height: 36px" v-else></div>
      </div>
    </el-form-item>
    <el-form-item label="登记说明">
      <el-input v-model="params.visit_des" type="textarea"></el-input>
    </el-form-item>
    <el-form-item label="附件上传">
      <upload-oss
        multiple
        accept="image/*"
        listType="picture-card"
        ref="upload_oss"
        :file-list="fileList"
        :on-complete="handleImagesComplete"
      ></upload-oss>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" :loading="saveLoading" @click="submit">完成</el-button>
      <el-button @click="beforeClose">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
const TYPE_OPERATE = '经营情况'
// const TYPE_COOPERATE = '配合情况'
// const TYPE_OPINION = '舆论情况'
const TYPE_OTHER = '其他'
const TYPE_CAPITAL = '资金使用情况'

export default {
  components: {},
  props: {
    visible: Boolean,
    relatedData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data: () => ({
    related: {},
    types: [TYPE_CAPITAL, TYPE_OTHER],
    options: [
      { label: '正常', value: 1 },
      { label: '异常', value: 0 },
    ],
    params: {
      visit_des: '',
      visit_status: 1,
    },
    visitType: '经营情况',
    otherVisitType: '',
    operateAbType: '违法违规',
    operateAbList: [
      { label: '违法违规', value: '违法违规' },
      { label: '转产', value: '转产' },
      { label: '停产', value: '停产' },
    ],
    fileList: [],
    updateData: {},
  }),
  computed: {
    ...mapGetters(['user']),
    showOtherInput() {
      return this.visitType === TYPE_OTHER
    },
    showOperateAbSelect() {
      return this.params.visit_status === 0 && this.visitType === TYPE_OPERATE
    },
  },
  watch: {
    relatedData: {
      handler: function (val) {
        if (val.customer_related_id) {
          this.related = { ...val }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.initRelated()
  },
  methods: {
    beforeClose() {
      this.$emit('success', true)
    },
    initRelated() {
      if (this.related.customer_related_id) {
        return
      }
      this.related = JSON.parse(sessionStorage.getItem('customer_related_view'))
    },
    async submit() {
      if (this.visitType === '') {
        return this.$message.error('请选择登记类型')
      }
      if (this.visitType === TYPE_OTHER && !this.otherVisitType) {
        return this.$message.error('请填写登记类型')
      }
      if (this.params.visit_status === '') {
        return this.$message.error('请选择登记状态')
      }
      if (this.params.visit_status === 0 && !this.params.visit_des) {
        return this.$message.error('请输入登记说明')
      }

      this.updateData = {
        customer_id: this.related.customer_id,
        customer_name: this.related.customer_name,
        customer_related_id: this.related.customer_related_id,
      }
      this.updateData.visit_status = this.params.visit_status
      this.updateData.visit_des = this.getDes()
      this.updateData.visit_type = '7'
      this.updateData.visit_person = this.user.realName || this.user.userName
      this.updateData.visit_date = this.$utils.dateFormat(new Date(), 'yyyy-MM-dd')
      this.$refs.upload_oss.submit()
    },
    getDes() {
      let status = ''
      const index = this.options.findIndex(it => it.value === this.params.visit_status)
      if (index > -1) {
        status = this.options[index].label
      }
      let des = ''
      if (this.visitType !== '其他') {
        des = `${this.visitType}：${status}`
      } else {
        des = `${this.otherVisitType}：${status}`
      }
      if (this.visitType === TYPE_OPERATE && this.params.visit_status === 0) {
        des += ` - ${this.operateAbType}`
      }
      if (this.params.visit_des) {
        des += `（${this.params.visit_des}）`
      }
      return des
    },
    async handleImagesComplete(images) {
      this.updateData.visit_images = images.length
        ? `["${images.map(img => img.url).join('","')}"]`
        : ''
      this.saveLoading = true
      const [res, err] = await this.$utils.promise(
        this.$api.addData(this.$serviceName, 'credit_visit_record', this.updateData)
      )
      this.saveLoading = false
      if (res) {
        this.$message.success('管理登记成功！！')
        this.beforeClose()
      } else {
        this.$message.error(`管理登记失败，请重试！（${err.status}）`)
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
